<script lang="ts" setup>
import {useLocationStore} from "@/stores/locationStore";
import {findRootRouteInfo, n2r, routes} from "@/utils/routes";
import NavIcon from "@/components/pageElement/NavIcon.vue";
import {onMounted, ref, type Ref} from 'vue';
import {onBeforeRouteUpdate, useRoute} from 'vue-router';

const route = useRoute();
const locationStore = useLocationStore();
const routeList: Ref<RouteInfo[]> = ref([]);
routeList.value = locationStore.belongTo ? routes[locationStore.belongTo] : [];

// 更新 locationStore 的逻辑
function updateLocationStore(path: string) {
  const match = path.match(/^(\/[^?]+)/);
  const routePath = match ? match[1] : "";
  const routeInfo = Object.values(routes).flat().find(route => route.path === routePath);

  if (routeInfo && routeInfo.belongTo && !route.path.includes('articleTemplate')) {
    // 检查内容是否需要更新
    if (
        locationStore.name !== routeInfo.name ||
        locationStore.displayName !== routeInfo.displayName ||
        locationStore.routeName !== convertPathToKebabCaseName(routeInfo.path) ||
        locationStore.path !== routeInfo.path ||
        locationStore.belongTo !== routeInfo.belongTo
    ) {
      locationStore.name = routeInfo.name;
      locationStore.displayName = routeInfo.displayName || '';
      locationStore.routeName = convertPathToKebabCaseName(routeInfo.path);
      locationStore.path = routeInfo.path;
      locationStore.belongTo = routeInfo.belongTo;
      routeList.value = routes[routeInfo.belongTo] || [];
    }
  }
}

// 初次挂载时调用
onMounted(() => {
  updateLocationStore(route.path);
});

// 每次路由更新时调用
onBeforeRouteUpdate((to) => {
  updateLocationStore(to.path);
});
</script>

<template>
  <div class="list web">
    <div class="listl fl">
      <ul>
        <li class="lname" style="display:none">
          <h2></h2><span></span></li>
        <li v-if="routeList && routeList.length > 0 && !route.path.includes('articleTemplate')" class="lname"
            style="display:block">
          <h2>{{ routeList[0]?.displayName }}</h2><span>{{ routeList[0]?.englishName }}</span>
        </li>
        <li v-else class="lname" style="display:block">
          <h2>{{ findRootRouteInfo(locationStore.belongTo)?.displayName }}</h2>
          <span>{{ findRootRouteInfo(locationStore.belongTo)?.englishName }}</span>
        </li>
        <li class="lname" style="display:none">
          <h2></h2><span></span></li>
        <li class="lname" style="display:none">
          <h2></h2><span></span></li>
        <li class="lname" style="display:none">
          <h2></h2><span></span></li>
        <li class="lname" style="display:none">
          <h2></h2><span></span></li>
        <li class="lname" style="display:none">
          <h2></h2><span></span></li>

        <li
            v-for="(routeInfo, index) in routeList.slice(1)"
            v-if="!route.path.includes('articleTemplate') && routeList && routeList.length > 1"
            :id="route.path === routeInfo.path ? 'on' : ''"
            :key="index + 1"
            class="nav2"
        >
          <NuxtLink
              :title="routeInfo.displayName"
              :to="{ name: n2r(routeInfo.name) }"
              @click="setLocationByName(routeInfo.name)"
          >
            {{ routeInfo.displayName }}
          </NuxtLink>
        </li>
      </ul>
    </div>
    <div class="listr fr">
      <ul class="title">
        <li class="lmm flex">
          <nav-icon :nav-name="findRootRouteInfo(locationStore.belongTo, locationStore.path)?.displayName"></nav-icon>
          <span>{{ locationStore.displayName }}</span>
        </li>
        <li class="state">
          当前所在位置:
          <NuxtLink to="/" @click="setLocationByName('首页')">首页</NuxtLink>
          <span>-</span>
          <NuxtLink
              v-if="routeList.length > 0 && !route.path.includes('articleTemplate')"
              :to="{ name: n2r(routeList[0].name) }"
              @click="setLocationByName(routeList[0].name)"
          >
            {{ routeList[0]?.displayName }}
          </NuxtLink>
          <NuxtLink v-else
                    :to="{name: n2r(locationStore.name)}"
          >{{ locationStore.displayName }}
          </NuxtLink>
          <!--          <span v-if="!route.path.includes('articleTemplate')&&routeList.map(routeInfo => routeInfo.path).indexOf(locationStore.path) > 0">-</span>-->
          <!--          <NuxtLink-->
          <!--              v-if="!route.path.includes('articleTemplate')-->
          <!--              && routeList.map(routeInfo => routeInfo.path).indexOf(locationStore.path) > 0"-->
          <!--              :to="{name: n2r(routeList.find(routeInfo => routeInfo.path === locationStore.path)!.name)}"-->
          <!--              @click="setLocationByName(routeList.find(routeInfo => routeInfo.path === locationStore.path)!.name)"-->
          <!--          >-->
          <!--            {{ locationStore.displayName }}-->
          <!--          </NuxtLink>-->
          <!--          <NuxtLink v-else :to="{name: n2r(locationStore.name)}">-->
          <!--            {{ locationStore.displayName }}-->
          <!--          </NuxtLink>-->
        </li>
      </ul>
      <slot></slot>
    </div>
  </div>
  <div class="del_float"></div>
</template>

<style scoped>

</style>
